<template>
	<div>
		<div v-if="show" class="cus">
			<div class="cus_box" style="width:1200px;">
				<div class="title">
					<span>已关联广告</span>
					<i @click="show = false" class="el-icon-close"></i>
				</div>
				<div class="mt10"><el-button type="primary" @click="add">新增广告</el-button></div>
				<div class="content">
					<el-table :data="tableData" height="500" border style="width: 100%">
						<el-table-column prop="id" label="ID" width="180"></el-table-column>
						<el-table-column prop="name" label="广告名称" width="180"></el-table-column>
						<el-table-column prop="type" label="广告类型">
							<template slot-scope="scope">
								{{ scope.row['type'] == 1 ? '图片' : scope.row['type'] == 2 ? '视频' : '--' }}
							</template>
						</el-table-column>
						<el-table-column prop="url" label="广告内容">
							<template slot-scope="scope">
								<el-popover v-if="scope.row['url'].search(/.mp4/i) == -1" :placement="'right-start'" trigger="click">
									<div><el-image style="width: 300px;height: auto;" :src="scope.row['url'] | formatImg" fit="fill"></el-image></div>
									<el-image :style="'width: 80px;height: 80px;'" :src="scope.row['url'] | formatImg" fit="contain" slot="reference"></el-image>
								</el-popover>

								<el-popover v-if="scope.row['url'].search(/.mp4/i) != -1" :placement="'right'" trigger="click">
									<div>
										<p class="mb20">{{scope.row['name']}}</p>
										<video controls style="width:500px;height:auto;" :src="scope.row['url'] | formatImg"></video>
									</div>
									<el-button type="primary"  slot="reference">查看</el-button>
									<!-- <video controls style="width:100px;height:auto;" :src="scope.row['url'] | formatImg"  slot="reference"></video> -->
								</el-popover>
								<!-- <div v-if="scope.row['url'].search(/.mp4/i) != -1">
									<video controls style="width:200px;height:100px;" :src="scope.row['url'] | formatImg"></video>
								</div> -->
							</template>
						</el-table-column>
						<el-table-column prop="place" label="播放屏"></el-table-column>
						<el-table-column prop="times" label="播放时长"></el-table-column>
						<!--            <el-table-column-->
						<!--              prop="address"-->
						<!--              label="播放次数">-->
						<!--            </el-table-column>-->
						<el-table-column prop="remarks" label="备注信息"></el-table-column>
						<el-table-column prop="ctime" label="创建时间"></el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button @click="advertList_cancel(scope.row)" type="text">取消关联</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>

		<add ref="add" v-on:add_call="add_call"></add>
	</div>
</template>

<script>
import add from './add'
export default {
	name: 'Related_advertising',
	components: {
		add
	},
	data() {
		return {
			show: false,

			row: {},

			tableData: []
		}
	},
	mounted() {},
	methods: {
		async getData() {
			const res = await this.apis.advertList_list({
				pageNum: 1,
				pageSize: 100000,
				abId: this.row.id
			})
			const list = res.rows || []
			this.tableData = list
		},
		fun_show(row) {
			this.row = row
			this.show = true

			this.getData()
		},
		add() {
			this.$refs.add.fun_show(this.row)
		},
		add_call() {
			this.getData()
		},
		advertList_cancel(row) {
			this.$confirm('确定要取消关联吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(async () => {
					const res = await this.apis.advertList_cancel({
						abId: this.row.id,
						avId: row.id
					})
					this.$message({
						type: 'success',
						message: '取消成功!'
					})

					this.getData()
				})
				.catch(() => {})
		}
	}
}
</script>

<style scoped lang="scss"></style>
